<script lang="ts" setup>
import {ref,reactive, watchEffect} from "vue";

interface IPro{
            "banners"?:Array<string>,
            "proid": string,
            "category": string,
            "brand": string,
            "proname": string,
            "originprice": number,
            "sales": number,
            "stock": number,
            "desc": string,
            "issale": number,
            "isrecommend": number,
            "discount": number,
            "isseckill": number,
            "img1": string,
            "img2": string,
            "img3": string,
            "img4": string
        }


    // const proList:Array<IPro> = reactive<Array<IPro>>(new Array<IPro>())
    const proList:Array<IPro> = reactive<Array<IPro>>([
        {
           "proid": "pro_e374dae5-22d7-40d8-ade2-5aa6449624c3",
            "category": "手机",
            "brand": "Apple",
            "proname": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
            "originprice": 4999,
            "sales": 4070000,
            "stock": 50000,
            "desc": "商品名称：AppleiPhone 11商品编号：100008348542商品毛重：440.00g商品产地：中国大陆CPU型号：其他运行内存：其他机身存储：128GB存储卡：不支持存储卡摄像头数量：后置双摄后摄主摄像素：1200万像素前摄主摄像素：1200万像素主屏幕尺寸（英寸）：6.1英寸分辨率：其它分辨率屏幕比例：其它屏幕比例屏幕前摄组合：刘海屏充电器：其他热点：人脸识别特殊功能：语音命令操作系统：iOS(Apple)",
            "issale": 1,
            "isrecommend": 0,
            "discount": 9,
            "isseckill": 0,
            "img1": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
            "img2": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/45954/33/10562/97168/5d780893Eaec0fe47/ee567a1dea515d38.jpg",
            "img3": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/80220/18/9892/163090/5d78089cEda2f9674/da3b18358e68cfca.jpg",
            "img4": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/61588/10/9949/164377/5d7808a1E6c3615dd/7c45f7039b9cbae8.jpg"
        },
        {
            "proid": "pro_50380160-ebd6-4e68-aded-8fceefc488d1",
            "category": "家电",
            "brand": " MIJIA/米家",
            "proname": "小米全面屏65英寸E65X 4K超高清 HDR 2GB+8GB 智能网络电视",
            "originprice": 3999,
            "sales": 15000,
            "stock": 695,
            "desc": "品牌名称：Xiaomi/小米 证书编号：2019010808227189证书状态：有效产品名称：小米电视3C规格型号：L65M5-EA： 220V～ 50/60Hz 160W产品名称：Xiaomi/小米 L65M5-EA品牌: Xiaomi/小米型号: L65M5-EA分辨率: 4K电视能效等级: 三级网络连接方式: 全部支持操作系统: MIUI3D类型: 无",
            "issale": 1,
            "isrecommend": 1,
            "discount": 9.5,
            "isseckill": 0,
            "img1": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01VUJK3f29zForLahYc_!!0-item_pic.jpg_430x430q90.jpg",
            "img2": "https://img.alicdn.com/imgextra/i2/1714128138/O1CN01jr6J1V29zFoV1LbUu_!!0-item_pic.jpg_430x430q90.jpg",
            "img3": "https://img.alicdn.com/imgextra/i3/1714128138/O1CN01KaVzhz29zFoBI7cxY_!!1714128138.jpg_430x430q90.jpg",
            "img4": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01WF3zMy29zFoJENfk4_!!1714128138.jpg_430x430q90.jpg"
        },
        {
           "proid": "pro_e374dae5-22d7-40d8-ade2-5aa6449624c3",
            "category": "手机",
            "brand": "Apple",
            "proname": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
            "originprice": 4999,
            "sales": 4070000,
            "stock": 50000,
            "desc": "商品名称：AppleiPhone 11商品编号：100008348542商品毛重：440.00g商品产地：中国大陆CPU型号：其他运行内存：其他机身存储：128GB存储卡：不支持存储卡摄像头数量：后置双摄后摄主摄像素：1200万像素前摄主摄像素：1200万像素主屏幕尺寸（英寸）：6.1英寸分辨率：其它分辨率屏幕比例：其它屏幕比例屏幕前摄组合：刘海屏充电器：其他热点：人脸识别特殊功能：语音命令操作系统：iOS(Apple)",
            "issale": 1,
            "isrecommend": 0,
            "discount": 9,
            "isseckill": 0,
            "img1": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
            "img2": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/45954/33/10562/97168/5d780893Eaec0fe47/ee567a1dea515d38.jpg",
            "img3": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/80220/18/9892/163090/5d78089cEda2f9674/da3b18358e68cfca.jpg",
            "img4": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/61588/10/9949/164377/5d7808a1E6c3615dd/7c45f7039b9cbae8.jpg"
        },
        {
            "proid": "pro_50380160-ebd6-4e68-aded-8fceefc488d1",
            "category": "家电",
            "brand": " MIJIA/米家",
            "proname": "小米全面屏65英寸E65X 4K超高清 HDR 2GB+8GB 智能网络电视",
            "originprice": 3999,
            "sales": 15000,
            "stock": 695,
            "desc": "品牌名称：Xiaomi/小米 证书编号：2019010808227189证书状态：有效产品名称：小米电视3C规格型号：L65M5-EA： 220V～ 50/60Hz 160W产品名称：Xiaomi/小米 L65M5-EA品牌: Xiaomi/小米型号: L65M5-EA分辨率: 4K电视能效等级: 三级网络连接方式: 全部支持操作系统: MIUI3D类型: 无",
            "issale": 1,
            "isrecommend": 1,
            "discount": 9.5,
            "isseckill": 0,
            "img1": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01VUJK3f29zForLahYc_!!0-item_pic.jpg_430x430q90.jpg",
            "img2": "https://img.alicdn.com/imgextra/i2/1714128138/O1CN01jr6J1V29zFoV1LbUu_!!0-item_pic.jpg_430x430q90.jpg",
            "img3": "https://img.alicdn.com/imgextra/i3/1714128138/O1CN01KaVzhz29zFoBI7cxY_!!1714128138.jpg_430x430q90.jpg",
            "img4": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01WF3zMy29zFoJENfk4_!!1714128138.jpg_430x430q90.jpg"
        },
        {
           "proid": "pro_e374dae5-22d7-40d8-ade2-5aa6449624c3",
            "category": "手机",
            "brand": "Apple",
            "proname": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
            "originprice": 4999,
            "sales": 4070000,
            "stock": 50000,
            "desc": "商品名称：AppleiPhone 11商品编号：100008348542商品毛重：440.00g商品产地：中国大陆CPU型号：其他运行内存：其他机身存储：128GB存储卡：不支持存储卡摄像头数量：后置双摄后摄主摄像素：1200万像素前摄主摄像素：1200万像素主屏幕尺寸（英寸）：6.1英寸分辨率：其它分辨率屏幕比例：其它屏幕比例屏幕前摄组合：刘海屏充电器：其他热点：人脸识别特殊功能：语音命令操作系统：iOS(Apple)",
            "issale": 1,
            "isrecommend": 0,
            "discount": 9,
            "isseckill": 0,
            "img1": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
            "img2": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/45954/33/10562/97168/5d780893Eaec0fe47/ee567a1dea515d38.jpg",
            "img3": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/80220/18/9892/163090/5d78089cEda2f9674/da3b18358e68cfca.jpg",
            "img4": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/61588/10/9949/164377/5d7808a1E6c3615dd/7c45f7039b9cbae8.jpg"
        },
        {
            "proid": "pro_50380160-ebd6-4e68-aded-8fceefc488d1",
            "category": "家电",
            "brand": " MIJIA/米家",
            "proname": "小米全面屏65英寸E65X 4K超高清 HDR 2GB+8GB 智能网络电视",
            "originprice": 3999,
            "sales": 15000,
            "stock": 695,
            "desc": "品牌名称：Xiaomi/小米 证书编号：2019010808227189证书状态：有效产品名称：小米电视3C规格型号：L65M5-EA： 220V～ 50/60Hz 160W产品名称：Xiaomi/小米 L65M5-EA品牌: Xiaomi/小米型号: L65M5-EA分辨率: 4K电视能效等级: 三级网络连接方式: 全部支持操作系统: MIUI3D类型: 无",
            "issale": 1,
            "isrecommend": 1,
            "discount": 9.5,
            "isseckill": 0,
            "img1": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01VUJK3f29zForLahYc_!!0-item_pic.jpg_430x430q90.jpg",
            "img2": "https://img.alicdn.com/imgextra/i2/1714128138/O1CN01jr6J1V29zFoV1LbUu_!!0-item_pic.jpg_430x430q90.jpg",
            "img3": "https://img.alicdn.com/imgextra/i3/1714128138/O1CN01KaVzhz29zFoBI7cxY_!!1714128138.jpg_430x430q90.jpg",
            "img4": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01WF3zMy29zFoJENfk4_!!1714128138.jpg_430x430q90.jpg"
        },
        {
           "proid": "pro_e374dae5-22d7-40d8-ade2-5aa6449624c3",
            "category": "手机",
            "brand": "Apple",
            "proname": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
            "originprice": 4999,
            "sales": 4070000,
            "stock": 50000,
            "desc": "商品名称：AppleiPhone 11商品编号：100008348542商品毛重：440.00g商品产地：中国大陆CPU型号：其他运行内存：其他机身存储：128GB存储卡：不支持存储卡摄像头数量：后置双摄后摄主摄像素：1200万像素前摄主摄像素：1200万像素主屏幕尺寸（英寸）：6.1英寸分辨率：其它分辨率屏幕比例：其它屏幕比例屏幕前摄组合：刘海屏充电器：其他热点：人脸识别特殊功能：语音命令操作系统：iOS(Apple)",
            "issale": 1,
            "isrecommend": 0,
            "discount": 9,
            "isseckill": 0,
            "img1": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
            "img2": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/45954/33/10562/97168/5d780893Eaec0fe47/ee567a1dea515d38.jpg",
            "img3": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/80220/18/9892/163090/5d78089cEda2f9674/da3b18358e68cfca.jpg",
            "img4": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/61588/10/9949/164377/5d7808a1E6c3615dd/7c45f7039b9cbae8.jpg"
        },
        {
            "proid": "pro_50380160-ebd6-4e68-aded-8fceefc488d1",
            "category": "家电",
            "brand": " MIJIA/米家",
            "proname": "小米全面屏65英寸E65X 4K超高清 HDR 2GB+8GB 智能网络电视",
            "originprice": 3999,
            "sales": 15000,
            "stock": 695,
            "desc": "品牌名称：Xiaomi/小米 证书编号：2019010808227189证书状态：有效产品名称：小米电视3C规格型号：L65M5-EA： 220V～ 50/60Hz 160W产品名称：Xiaomi/小米 L65M5-EA品牌: Xiaomi/小米型号: L65M5-EA分辨率: 4K电视能效等级: 三级网络连接方式: 全部支持操作系统: MIUI3D类型: 无",
            "issale": 1,
            "isrecommend": 1,
            "discount": 9.5,
            "isseckill": 0,
            "img1": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01VUJK3f29zForLahYc_!!0-item_pic.jpg_430x430q90.jpg",
            "img2": "https://img.alicdn.com/imgextra/i2/1714128138/O1CN01jr6J1V29zFoV1LbUu_!!0-item_pic.jpg_430x430q90.jpg",
            "img3": "https://img.alicdn.com/imgextra/i3/1714128138/O1CN01KaVzhz29zFoBI7cxY_!!1714128138.jpg_430x430q90.jpg",
            "img4": "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01WF3zMy29zFoJENfk4_!!1714128138.jpg_430x430q90.jpg"
        }
      
      ]);

      console.log("proList.length",proList.length);
      
      // 分页相关：
      // 1)、每页的条数
      const pageSize = ref(3);
      // 2）、当前页码
      const currentPage = ref(1);

      // 3)、当前页面的数据。
      // let list = proList.slice(0,3);

      let list:Array<IPro> = reactive<Array<IPro>>(new Array<IPro>());



      watchEffect(()=>{
        list.splice(0,list.length,...proList.slice(pageSize.value*(currentPage.value-1),pageSize.value*currentPage.value));
        console.log("list",list);        
      })
      

</script>

<template>  
   <el-table :data="list" style="width: 100%">      
    <el-table-column fixed prop="proid" label="编号" width="180"  />
    <el-table-column fixed prop="proname" label="产品名称" width="180" />
    <el-table-column prop="category" label="分类" width="180" />
    <el-table-column prop="brand" label="品牌" width="180" />
    <el-table-column prop="originprice" label="价格" width="180" />
    <el-table-column prop="discount" label="折扣" width="180" />
    <el-table-column prop="sales" label="销量" width="180" />
    <el-table-column prop="stock" label="库存" width="180" />
    <el-table-column  width="180" label="是否下架" >
      <template #default="scope">
        <el-switch v-model="scope.row.issale"></el-switch>
      </template>
    </el-table-column>
    <el-table-column width="180" label="是否推荐" >
      <template #default="scope">
        <el-switch v-model="scope.row.isrecommend"></el-switch>
      </template>
    </el-table-column>
    <el-table-column width="180" label="是否秒杀" >
      <template #default="scope">
        <el-switch v-model="scope.row.isseckill"></el-switch>
      </template>
    </el-table-column>
    <el-table-column width="180" label="图片1" >
      <template #default="scope">
        <img :src="scope.row.img1" >
      </template>
    </el-table-column>
    <el-table-column width="180" label="图片2" >
      <template #defalut="scope">
        <img :src="scope.row.img2" >
      </template>
    </el-table-column>
      <el-table-column fixed="right" label="删除">
        <template #default="scope">
          <el-button @click="deleteHandler(scope.row.bannerid)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column  fixed="right" label="修改">
        <template #default="scope">
          <el-button @click="deleteHandler(scope.row.bannerid)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:pageSize="pageSize" v-model:current-page="currentPage"  background layout="prev, pager, next" :total="proList.length" />
</template>

<style scoped>

img{
  width:200px;
  height: 50px;
}

</style>